<template>
  <div class="new-group">
    <h1>{{ form.id ? "编辑设备分类" : "新增设备分类" }}</h1>
    <el-form
      :model="form"
      ref="formRef"
      label-width="100px"
      style="max-width: 600px; margin: 20px auto"
    >
      <el-form-item label="设备分类名称" prop="group">
        <el-input v-model="form.group" placeholder="请输入设备分类名称" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="form.status" placeholder="请选择状态">
          <el-option label="启用" :value="1" />
          <el-option label="禁用" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import axios from "axios";
import { ElMessage } from "element-plus";

// 定义响应式表单数据
const form = reactive({
  id: null, // ID
  group: "", // 设备分类名称
  status: null, // 状态
  name: "", // 设备名称
  deviceNum: "", // 设备编号
  style: "", // 品牌型号
  area: "", // 所在区域
  fixer: "", // 维修人员
  remark: "", // 备注
});

// 定义表单的模板引用
const formRef = ref(null);

// 获取路由参数
const route = useRoute();
const router = useRouter();

// 加载表单数据
const loadFormData = async () => {
  const { id } = route.query; // 获取路由中的 ID 参数
  if (id) {
    try {
      // 请求后端接口获取数据
      const response = await axios.get(
        `http://localhost:8080/DeviceGroup/${id}`,
        {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        }
      );
      const result = response.data;

      // 检查后端返回的数据是否正确
      if (result.code === 1) {
        Object.assign(form, result.data);
      } else {
        ElMessage.error(result.msg || "数据加载失败");
      }
    } catch (error) {
      console.error("请求失败", error);
      ElMessage.error("请求失败");
    }
  }
};

// 保存操作
const save = async () => {
  try {
    // 验证表单有效性
    if (formRef.value) {
      await formRef.value.validate();
    }

    // 判断是新增还是修改
    const url = form.id
      ? "http://localhost:8080/DeviceGroup/updateDeviceGroup" // 修改接口
      : "http://localhost:8080/publicDevice/saveDevice"; // 新增接口
    const method = form.id ? "put" : "post";

    // 提交数据
    const response = await axios({
      method,
      url,
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      data: form,
    });
    const result = response.data;

    if (result.code === 1) {
      ElMessage.success(form.id ? "修改成功" : "新增成功");
      router.push("/backend/equipment/classify"); // 跳转到设备分类列表页面
    } else {
      ElMessage.error(result.msg || "保存失败");
    }
  } catch (error) {
    console.error("保存失败", error);
    ElMessage.error("请求失败");
  }
};

// 取消操作
const cancel = () => {
  ElMessage.info("取消编辑");
  router.back(); // 返回上一页
};

// 在组件挂载时加载表单数据
onMounted(loadFormData);
</script>

<style scoped>
.new-group {
  background-color: white;
  padding: 20px;
  margin-top: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  padding: 2rem 0 10px 4rem;
}
</style>
